import { IconButton } from "@/components/icon";
import { Iconify } from "@/components/icon";
import { faker } from "@faker-js/faker";
import { Button, Card, Table, Tag, Typography } from "antd";
import type { ColumnsType } from "antd/es/table";
import { useState } from "react";
import TaskModal from "./task-modal";

interface TaskItem {
	id: string;
	title: string;
	status: "pending" | "in_progress" | "completed";
	priority: "low" | "medium" | "high";
	assignee: string;
	dueDate: string;
}

const statusColors = {
	pending: "default",
	in_progress: "processing",
	completed: "success",
};

const priorityColors = {
	low: "blue",
	medium: "orange",
	high: "red",
};

export default function TaskPage() {
	const [tasks, setTasks] = useState<TaskItem[]>(() => {
		return Array.from({ length: 10 }, () => ({
			id: faker.string.uuid(),
			title: faker.company.catchPhrase(),
			status: faker.helpers.arrayElement([
				"pending",
				"in_progress",
				"completed",
			]),
			priority: faker.helpers.arrayElement(["low", "medium", "high"]),
			assignee: faker.person.fullName(),
			dueDate: faker.date.future().toLocaleDateString(),
		}));
	});

	const [modalVisible, setModalVisible] = useState(false);
	const [editingTask, setEditingTask] = useState<TaskItem | undefined>();

	const handleAddTask = () => {
		setEditingTask(undefined);
		setModalVisible(true);
	};

	const handleEditTask = (task: TaskItem) => {
		setEditingTask(task);
		setModalVisible(true);
	};

	const handleDeleteTask = (taskId: string) => {
		setTasks((prevTasks) => prevTasks.filter((task) => task.id !== taskId));
	};

	const handleModalOk = (values: TaskItem) => {
		if (editingTask) {
			// Update existing task
			setTasks((prevTasks) =>
				prevTasks.map((task) =>
					task.id === editingTask.id ? { ...values, id: task.id } : task,
				),
			);
		} else {
			// Add new task
			setTasks((prevTasks) => [
				...prevTasks,
				{
					...values,
					id: faker.string.uuid(),
				},
			]);
		}
		setModalVisible(false);
	};

	const columns: ColumnsType<TaskItem> = [
		{
			title: "Title",
			dataIndex: "title",
			key: "title",
			render: (text) => <Typography.Text strong>{text}</Typography.Text>,
		},
		{
			title: "Status",
			dataIndex: "status",
			key: "status",
			render: (status) => (
				<Tag color={statusColors[status]}>
					{status.replace("_", " ").toUpperCase()}
				</Tag>
			),
		},
		{
			title: "Priority",
			dataIndex: "priority",
			key: "priority",
			render: (priority) => (
				<Tag color={priorityColors[priority]}>{priority.toUpperCase()}</Tag>
			),
		},
		{
			title: "Assignee",
			dataIndex: "assignee",
			key: "assignee",
		},
		{
			title: "Due Date",
			dataIndex: "dueDate",
			key: "dueDate",
		},
		{
			title: "Actions",
			key: "actions",
			render: (_, record) => (
				<div className="flex gap-2">
					<IconButton onClick={() => handleEditTask(record)}>
						<Iconify icon="solar:pen-bold" />
					</IconButton>
					<IconButton onClick={() => handleDeleteTask(record.id)}>
						<Iconify
							icon="solar:trash-bin-trash-bold"
							className="text-warning"
						/>
					</IconButton>
				</div>
			),
		},
	];

	return (
		<>
			<Card>
				<div className="mb-4 flex justify-between items-center">
					<Typography.Title level={4}>Task Management</Typography.Title>
					<Button
						type="primary"
						icon={<Iconify icon="solar:add-circle-bold" />}
						onClick={handleAddTask}
					>
						New Task
					</Button>
				</div>
				<Table
					columns={columns}
					dataSource={tasks}
					rowKey="id"
					pagination={{ pageSize: 10 }}
				/>
			</Card>

			<TaskModal
				open={modalVisible}
				title={editingTask ? "Edit Task" : "New Task"}
				initialValues={editingTask}
				onOk={handleModalOk}
				onCancel={() => setModalVisible(false)}
			/>
		</>
	);
}
